<template>
  <div>
    <component v-if="url" :is="myAsyncComponent" v-bind="{ context }"></component>
  </div>
</template>
<script>
import LoadingComponent from './LoadingComponent.vue'
import ErrorComponent from './LoadingComponent.vue'
export default {
  name: 'AsyncComponent',
  props: {
    url: {
      type: String,
      default: '',
    },
    context: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    myAsyncComponent() {
      if (!this.url) return LoadingComponent
      console.log('myAsyncComponent', this.url)
      return () => ({
        // 需要加载的组件 (应该是一个 `Promise` 对象)
        component: import(
          /* webpackChunkName: "async-print" */
          /* webpackMode: "lazy" */
          `@/AsyncComponent/print/${this.url}.vue`
        ),
        // 异步组件加载时使用的组件
        loading: LoadingComponent,
        // 加载失败时使用的组件
        error: ErrorComponent,
        // 展示加载时组件的延时时间。默认值是 200 (毫秒)
        delay: 200,
        // 如果提供了超时时间且组件加载也超时了，
        // 则使用加载失败时使用的组件。默认值是：`Infinity`
        timeout: 3000,
      })
    },
  },
}
</script>

<style module lang="scss"></style>
